<template>
  <div class="profit">
    <div class="header">
      <div class="title">我的收益</div>
    </div>
    <div class="detail" v-for="profit in profitData" :key="profit.id">
      <div class="cash">
        <span class="name">{{ profit.applyType }}</span>
        <span class="num">¥{{ profit.money }}</span>
      </div>
      <div class="date">{{ profit.applyTime | dateFormat }}</div>
      <div class="status" style="color: #0de66e" v-if="profit.status == '通过'">
        {{ profit.status }}
      </div>
      <div
        class="status"
        style="color: #f53b3b"
        v-if="profit.status == '不通过'"
      >
        {{ profit.status }}
      </div>
      <div
        class="status"
        style="color: #f8825d"
        v-if="profit.status == '未审核'"
      >
        {{ profit.status }}
      </div>
      <van-button
        type="primary"
        round
        block
        style="margin-top: 65px"
        color="#bf73ff"
        @click="showDialog(profit.id)"
        >撤销申请</van-button
      >
    </div>
    <div class="bottom" style="height: 70px"></div>
  </div>
</template>

<script>
import { mapActions, mapState, mapMutations } from "vuex";
import { get } from "@/http/axios";
import { Notify } from "vant";

export default {
  data() {
    return {};
  },
  computed: {
    //获取用户数据
    ...mapState("user", ["userInfo"]),
    ...mapState("profit", ["profitData"]),
  },
  methods: {
    //引入获取用户信息的方法
    ...mapActions("user", ["getUserInfo"]),
    ...mapActions("profit", ["getAllProfitData"]),
    //查询账户收益
    queryProfit() {
      let data = {
        page: 1,
        pageSize: 100,
        userId: this.userInfo.id,
      };
      this.getAllProfitData(data);
    //   console.log(this.userInfo.id);
    },
    //展示撤销申请弹出框
    showDialog(id) {
      this.$dialog
        .confirm({
          title: "确认撤销此申请？",
          confirmButtonColor: "red",
        })
        .then(async () => {
          let data = {
            id: id,
          }
          await get("/accountApply/revokeAccountApply", data).then((res) => {
            if (res.status == 200) {
              Notify({ type: "success", message: res.data.message });
            } else {
              Notify({ type: "danger", message: res.data.message });
            }
          });
          this.queryProfit();
        })
        .catch(() => {});
    },
  },
  created() {
      //获取用户id后查询用户收益信息
    this.getUserInfo().then((r) => {
      this.queryProfit();
    });
  },
};
</script>

<style scoped>
.title {
  height: 58px;
  background-image: linear-gradient(90deg, #bf73ff, #7579ff);
  text-align: center;
  line-height: 58px;
  color: #fff;
  letter-spacing: 0.4em;
}
.detail {
  width: 80%;
  height: 130px;
  margin: 0 auto;
  margin-top: 0px;
  margin-top: 1em;
  border-radius: 5px;
  padding: 0.5em 1em;
  color: #999;
  box-shadow: 0 0 10px #ccc;
}
.name {
  color: #333;
  font-weight: 300;
}
.num {
  float: right;
  color: #333;
}
.date {
  margin-top: 3em;
  font-size: 11px;
  float: left;
}
.status {
  float: right;
  font-size: 11px;
  margin-top: 3em;
}
</style>